'use client';

import { addon } from '@/pao/index';
import { ReactDataModel } from '@/pao/web';

@addon({
	label: '插件'
})
class TestDataModel extends ReactDataModel {
	constructor() {
		super();
	}
	num: number = 0;
	logOnRender = true;
	onElementCreated(): void {
		console.log(`element created ${this.id}`);
	}

	onElementChanged(): void {
		console.log(`element changed ${this.id}`);
	}

	override onRender(): React.ReactNode {
		return <div><h1 id={this.id} ref={this.useRef()}>
			Current click:{this.num}
		</h1>
			<p>{this.id}</p>
			<button onClick={()=> {
				this.num++;
				this.refresh();
				console.log(`click ${this.id}`);
			}}>Click</button></div>
	}
}

const testPage = new TestDataModel();

export default function Page() {
	return <div>
		{testPage.render()}
	</div>;
}